<template>
	浏览器窗口状态监听（document.visibilityState）
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue'

	let intervalId : string | number | NodeJS.Timeout | null | undefined = null;
	const isVisible = ref<boolean>(false);

	onMounted(() => {
		// 定时器（浏览器不显示当前页面-->关闭定时；浏览器显示当前页面-->开启定时；）
		restartInterval();
		document.addEventListener("visibilitychange", handleVisibilityChange);
	});

	// 销毁定时器
	onUnmounted(() => {
		clearInterval(intervalId);
		intervalId = null;
		document.removeEventListener("visibilitychange", handleVisibilityChange);
	});

	// 浏览器页面显示/隐藏时触发
	const handleVisibilityChange = () => {
		if (document.visibilityState === "visible") {
			// 当页面变为可见状态时，重新开始定时器
			isVisible.value = true;
			restartInterval();
		} else {
			// 当页面不可见时，停止定时器
			isVisible.value = false;
			clearInterval(intervalId);
			intervalId = null;
			console.log('定时器关闭了')
		}
	};

	// 定时器
	const restartInterval = () => {
		clearInterval(intervalId);
		intervalId = null;
		if (!intervalId) {
			intervalId = setInterval(() => {
				//逻辑代码
				console.log('定时器开启呢')
			}, 5000);
		}
	};
</script>

<style>
</style>